<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <body>
        <!-- 图片列表 -->
        <div class="picList">
            <!-- 标题部分 -->
            <div class="picList_title">
                <h1>
                    <span>
                        热门
                    </span>
                    影片
                </h1>
                <a href="#">查看更多</a>
                <!-- 标题部分end -->
            </div>
            <!-- 内容部分 -->
            <div class="picList_content">
                <!-- 左边大图 -->
                <div class="picList_big">
        <a>
                    
                        <img src="images/left.png" alt="">
                        <div class="mask1">
                            <p>
                                十大经典电影
                            </p>
                        </div>
                        <div class="mask2">
                            <div class="mask_title">
                                十大经典电影
                            </div>
                            <p>
                                年代： 2017
                            </p>
                            <p>
                                时长: 1：50
                            </p>
                        </div>
                    </a>
                </div>
                <!-- 左边大图end -->
                <!-- 右边小图 -->
                <div class="picList_small">
                <ul class="picList_small1">
                    <a>
    <li><img src="images/right1.png" alt="">
    <div class="maskr1">
        <p>金刚狼</p></div>
    <div class="maskr2">
        <div class="maskr_title">金刚狼</div>
    <p>年代： 2017</p>
    <p>时长： 1：50</p></div></li></a>
    
                    <a>
    <li><img src="images/right2.png" alt="">
    <div class="maskr3">魔兽</div>
    <div class="maskr4">
        <div class="maskr_title">魔兽</div>
    <p>年代： 2017</p>
    <p>时长： 1：50</p></div></li></a>
                    <a>
    <li><img src="images/right3.png" alt="">
    <div class="maskr5">盗梦空间</div>
    <div class="maskr6">
        <div class="maskr_title">盗梦空间</div>
    <p>年代： 2017</p>
    <p>时长： 1：50</p></div></li></a>
                    <a>
    <li><img src="images/right4.png" alt="">
    <div class="maskr7">杀手47</div>
    <div class="maskr8">
        <div class="maskr_title">杀手47</div>
    <p>年代： 2017</p>
    <p>时长： 1：50</p></div></li></a>
                </ul>
            </div>
            </div>
            <!-- 右边小图end -->
            <div class="clears"></div>
            <!-- 内容部分end -->
        </div>
        <!-- 图片列表end -->
</body>
</html>